<template>
  <div class="infinite-list">
    <slot />
    <div ref="loadingTarget" class="loading-wrapper">
      <!-- 加载更多 -->
      <p class="text-sm text-zinc-700" v-if="!isFinished">
        正在努力加载中{{ '--><--' }}
      </p>
      <img v-if="!isFinished" src="@/assets/style/svg/infinite-load.svg" />
      <!-- 没有数据了 -->
      <p v-if="isFinished" class="no-data">没有更多数据了</p>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

const props = defineProps({
  // 是否处于加载状态
  modelValue: Boolean,
  // 数据是否全部加载完成
  isFinished: Boolean
})

const emits = defineEmits(['update:modelValue', 'onLoad'])

const loading = props.modelValue

const loadingTarget = ref(null)
useIntersectionObserver(
  loadingTarget,
  ([{ isIntersecting }], observerElement) => {
    if (isIntersecting && !props.isFinished && !loading.value) {
      emits('update:modelValue', true)
      emits('onLoad')
    }
  }
)
</script>

<style lang="scss" scoped>
.loading-wrapper {
  text-align: center;
  img {
    display: inline-block;
    width: 88px;
    height: 88px;
  }
}
</style>
